<template>
	<uni-list :border="false">
		<uni-list-item class="listItem" clickable  @click="onClick" v-for="(item,index) in 10">
			<template v-slot:body>
				<image class="avatar" src="/src/static/images/mine_bg.png"></image>
				<view class="listContent">
					<view class="userName">张三{{index}}<label>07:07</label></view>
					<view class="itemInfo">
						<view class="infoText">
							<view class="text">九龙坡人民法院</view>
							<label>法官</label>
						</view>
						<view class="infoText">
							<view class="text">(2024)渝1017民初3636号</view>
							<label>待开庭</label>
							<view class="dot">2</view>
						</view>
					</view>
				</view>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script setup lang="ts">
	const onClick = () => {
		uni.navigateTo({
			url: '/subPages/news/leave/index'
		})
	}
</script>
<style scoped lang="scss">
	:deep(.v-slot_cl_body){
		display: flex;
		width: 100%;
	}
	.listItem{
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 0 30rpx;
		.avatar{
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx;
			flex-shrink: 0;
			overflow: hidden;
		}
		.listContent{
			width: calc(100% - 210rpx);
			padding: 18rpx 0;
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.userName{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #222222;
				label{
					margin-left: auto;
					margin-right: 10rpx;
					font-size: 20rpx;
					color: #999999;
					flex-shrink: 0;
				}
			}
			.itemInfo{
				.infoText{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					display: flex;
					align-items: center;
					margin-top: 5rpx;
					.text{
						max-width: calc(100% - 70rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					label{
						margin: 0 10rpx;
						flex-shrink: 0;
					}
					.dot{
						width: auto;
						min-width: 12rpx;
						height: 28rpx;
						line-height: 28rpx;
						padding: 0 8rpx;
						background-color: #E63633;
						border-radius: 90rpx;
						font-size: 18rpx;
						color: #FFFFFF;
						margin-left: auto;
						flex-shrink: 0;
					}
				}
				.infoText:last-child{
					.text{
						max-width: calc(100% - 120rpx);
					}
				}
			}
		}
	}
</style>
